<template>
  <div class="mainPad">
    <div class="xxlist">
      <div class="l1">
        <label class="ti" for="demo01">手机号码：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model.trim="tel" placeholder="手机号码" id="demo01">
      </div>
      <div class="l1">
        <label class="ti" for="demo02">密码：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model="password" placeholder="密码" id="demo02">
      </div>
      <div class="l1">
        <label class="ti" for="demo03">确认密码：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model="confirmpassword" placeholder="确认密码" id="demo03">
      </div>
      <div class="l1">
        <label class="ti" for="demo04">用户名：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model="username" placeholder="用户名" id="demo04">
      </div>
      <div class="l1">
        <div class="ti">
          性别：
        </div>
        <div class="t">
          男<input type="radio" name="sex" v-model="sex" value=1>
          女<input type="radio" name="sex" v-model="sex" value=0>
        </div>
      </div>
    </div>
    <div class="qrzf" @click="enrollAndTologin">
      <div class="my-2">注册</div>
    </div>

  </div>
</template>

<script setup lang="ts">
import store from "../store";
import {onBeforeMount, ref} from "vue";
import axios from "axios";
import router from "../router";

function setTitle(){
  store.state.tit="用户注册"
}

onBeforeMount(()=>{
  setTitle()
})

const list = ref([])
const tel = ref('')
const username = ref('')
const password = ref('')
const confirmpassword = ref('')
const sex = ref(0)

const enrollAndTologin = ()=>{
  axios.post('/User/UserId',{userId:tel.value,userName:username.value,password:password.value,userSex:sex.value
  })
      .then(res=>{
        list.value = res.data;
        console.log(res.data)
      })

  router.push('/login')
}

</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.l1{
  @apply m-2 flex flex-row;
}

.ti{
  width: 25%;
  @apply flex font-semibold text-gray-700;
}

.t{
  @apply flex text-gray-400;
}

.t i{
  @apply flex justify-center content-center items-center mx-2;
}

.qrzf{
  @apply border rounded-md bg-green-500 text-white font-semibold
  flex justify-center content-center items-center m-2;
}

.barPad div {
  @apply basis-1/4 text-center;
}
</style>